import { useState } from 'react';

const PostForm = ({ addBlog }) => {
    const [title, setTitle] = useState('');
    const [author, setAuthor] = useState('');
    const [url, setUrl] = useState('');
    const handleSubmit = async (event) => {
        event.preventDefault();
        const newBlog = {
            title,
            author,
            url
        };
        await addBlog(newBlog);
        setTitle('');
        setAuthor('');
        setUrl('');
    };
    const handleTitleChange = ({ target }) => setTitle(target.value);
    const handleAuthorChange = ({ target }) => setAuthor(target.value);
    const handleUrlChange = ({ target }) => setUrl(target.value);

    return (
        <div>
            <h1>Create New</h1>
            <form id="form" onSubmit={handleSubmit}>
                <div>
                    Title:
                    <input id="title" type="text" value={title} name="Title:" onChange={handleTitleChange} />
                </div>

                <div>
                    Author:
                    <input id="author" type="text" value={author} name="Author:" onChange={handleAuthorChange} />
                </div>

                <div>
                    Url:
                    <input id="url" type="text" value={url} name="Url:" onChange={handleUrlChange} />
                </div>

                <button id="create" type="submit">
                    create
                </button>
            </form>
        </div>
    );
};
export default PostForm;
